Inspired!
Taking a page from CSS Zen garden, I'm working up a template for my resume. I intend to use it as an example of what I can do using CSS. Primarily it will be CSS-focused, however some aspects may require javascript. The idea is to showcase my skills as an artist, designer and coder, and to give me a playground for new ideas.
As a multi-talented individual, this gives me an opportunity to create a holistic and yet complete record of my work experiences, education, and general life experiences - while yet refining that list into something useful for specific types of jobs.
Types of Resumes
Depending on the type of job or career one seeks, one will want to design and layout a resume to match. I'm sure a lot of people might look at me like I am insane, but a well laid out resume will give a lot of information, clearly, in a readable format, that is quickly scanned by a potential hiring manager. You could use a template found anywhere online, or within many of the word precessing programs. However, these have a lot of downfalls, especially with the resume scanning programs used by many employers today to help slogg through the numerous resumes they recieve for any give job offier.
Now, the "type" of resume depends on the kind of job or career path you wish to apply. The layout of the resume information is primarily controlled by what information you have available. There are two sub-groupings under "types". You have the classic four-type most resume classes teach prospective job seekers about. Then there are the less well known, job-related types. These both will control the general format of a resume.
Now, the "type" of resume depends on the kind of job or career path you wish to apply. The layout of the resume information is primarily controlled by what information you have available. There are two sub-groupings under "types". You have the classic four-type most resume classes teach prospective job seekers about. Then there are the less well known, job-related types. These both will control the general format of a resume.
The Classics:
Chronological - Most common format. Best used by those that have no gaps in their work history. This would put the experience section first, in DOM order.
Functional - Focus on skills over work history. Best used by those who have gaps in their work history, may be transitioning to a different career path, or have a short work history (high school grad / colleg grad). This would put the skills section above the experience section, in DOM order.
Combination - Tells the hiring manager a story. It's flexible format is best for those who want to detail work experiences and make them relevant to the job posting. A qualifications summary section would come before either experience or skills in the DOM order. The skills section and the experience section are interchangable.
Targeted - Customize for the specific job posting and everything within mirrors the job requirements. This is a more refined version of the Combination Resume.
Job-Related:
Business - See the Classics. They often have specific styles of Typography that are preferred.
Tech/Trade - See the Classics. They may be well designed, but they refrain from fancy embellishments.
Design - Suggested to be creative with these to highlight design skills - but they must be readable too.
Creative - These can get a bit out of hand (or creative genius) and cross over into the Multimedia arena in some cases.
Artist - Extra sections; Grants/Awards earned, Exhibition Record, Projects/ Collaborative Projects, Commissions, Collections, Bibliography, Publications as an Author, Teaching or Related Experience, Lectures/Workshops, Curatorial Projects, Gallery Affiliation(s) or Client List (for Designers).
Navigation
Since this document is also a web site, I have to take into consideration how one might navigate between different formats, as well as find the way back to the main page. This has me considering traditional layouts of web pages and why they are designed this way in the first place. Should I break the mold, or follow the herd?
HTML5 gives us some very nice elements to use, and the way the standard is written they make sense. But the difficulty I faced was a simple question with a difficult answer. Do I code the resume as the web page? The header of the resume being the header of the web page? Or do I code it as an article within the web page's framework? This will affect overall navigation too. So what to do
HTML5 gives us some very nice elements to use, and the way the standard is written they make sense. But the difficulty I faced was a simple question with a difficult answer. Do I code the resume as the web page? The header of the resume being the header of the web page? Or do I code it as an article within the web page's framework? This will affect overall navigation too. So what to do
Accessibility
A favorite topic of mine, accessibility (or inclusive/universal) design is a must. Since there shouldn't be too much in the way of multimedia, initially, I fully expect to achieve at least an AA compliance rating based on the WCAG 2.0 guidelines.
Pencil on Paper: Initial Work Ups and Notes
Photo of hand-written notes and initial thumbnails as I sort out the differences and similarities between a physical resume and a tradtional web page.
Photo of hand-written margin notes on graph paper.
Organization
Basic DOM structure is important, especially for inclusive design considerations. Header, body content area, and footer are obviously not sections I'm going to change for any reason.
However there are three points that are up for creative tinkering: main navigation, skip links, and how the body content will be organized via the DOM.
My Musings
Over all is the thought that this is not a normal web page nor is it a traditional resume. Finding that hybrid that is both elegant as well as useful is difficult but not impossible.
My Resume Structure
First I needed to decide on the content. The more I considered it the more I realized I could hide/expose different sections as needed. BUT I needed a basic core structure! So, I took a hybrid approach, focused on the Classic "functional resume" type and added in the "artist type" as it has additional categories.
I ended up choosing to nest the resume inside the web page as the page's main content. This gave me room to layout and design a main navigation area, as well as the selection section so a use could switch between different resumes. The more I considered how CSS Garden did it the more it felt "right". The resume selection controls would work very well as foot content in both semantics as well as functionality.
It works well on mobile devices, and follows a logical flow of viewer intent of 1) see the resume then 2) check out other resume styles or follow the resume offered links.
Main Navigation will be needed as the resume is a web page in it's own right. Initial design attempts to make the page stand alone only gave rise to the issue of "navigating away from it" or "going some where else". Even with an obvious link to my website and portfolio often those who saw the original design said they would close out of the browser just to open a new one.
Skip Links are essential navigational tools to aid AT (Assistive Technology) users in finding specific content areas quickly while yet skipping over repetitive navigational lists normally found on traditional websites. Having an over abundance of them can be as detrimental as not having enough of the right kind. They also need to be as close to the top of the DOM structure as possible, even before traditional navigation lists.
Yet because the main nav won't look like the main nav on my site, the thought is "Is it really repetitive?" and "do I really need skip links?" The "main nav" will point to ID anchors inside the resume, as well as a "go to main site" link. Also if I added even just a "skip to main content" link, do I put it before the "logo" that takes a user "back to the main site" or just after it?
Skill sets is an area that would change from resume type to resume type. The question, in terms of HTML5 semantics, is this an "aside" or just another "section"? It is an essential part of the resume regardless of the type, even if the visuals make it seem like and "aside".
The second issue to consider is the DOM order. It's DOM position may differ depending on the type of resume one wishes to show (see more in regards to the Types of Resumes as noted above). For visual design, I can use CSS to re-arrange how it looks, what portions of the resume show, and which section displays "first". However, it's not so easy to manipulate the DOM order in the same way, unless I add some javascript in there (which I'm trying to avoid for now).
So I have to make a choice. Skills section, main experience section, or the qualifications summary section - which should go first? My initial designs had my qualifications above my experience within the main body of the resume, with my skills list to the left. The more I consider how some of the resume reading technology out there works, I'm more inclined to push the skill sets section first followed by the "body content" area. Then float them.
Codepen screenshot of html DOM order. http://codepen.io/drakenhart/pen/bpyaRR
As I continue working up the general organization of the DOM, I realize something. If this is going to be a "stand alone", then per the W3C standards, <article> would be appropriate for the whole of the document. However, that leaves the <body> header-less. So the question stands - do I make the whole site the resume, or do I make it an article inside the site?
I also started considering what else might go within the resume? Should I also link specific portfolio items? Why not? This started my brain thinking about user expereince, and what the purpose of a digital online resume might be (outside of a fun project for myself). The resume itself might be it's own portfolio, a show of skills in coding, accessibility, structure, and use. It would be a way to contact me as well. It also is what it is, a resume that can be printed or shared digitally. But what would the USER want or need of it?
I also started considering what else might go within the resume? Should I also link specific portfolio items? Why not? This started my brain thinking about user expereince, and what the purpose of a digital online resume might be (outside of a fun project for myself). The resume itself might be it's own portfolio, a show of skills in coding, accessibility, structure, and use. It would be a way to contact me as well. It also is what it is, a resume that can be printed or shared digitally. But what would the USER want or need of it?
Codepen screenshot of the second attempt on organizting the html DOM order. http://codepen.io/drakenhart/pen/dXyyKR
((Currently On Hold due to Freelance Projects.))
